<!doctype html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>1.1.1版本</title>
	<style type="text/css">
		body {
			padding: 500px;
			line-height: 1.7em;
			font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
			font-size: 12px;
			text-align: center;
			color: #333333;
			padding: 50px;
			margin: 50px;
			border: 100px;
			background: aqua;
			height: 800px;
		}

		h1 {
			font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
			position: relative;
			text-align: center;
			color: #353535;
			font-size: 50px;
			font-family: "Cormorant Garamond", serif;
		}

		p {
			padding-top: 200px;
			padding-bottom: 100px;
			font-family: "Lato", sans-serif;
			font-weight: 2000;
			text-align: center;
			font-size: 100px;
			color: violet;
		}

		input {
			font-size: 2em;
		}

		button {
			margin: 20px;
		}

		input[type=button] {
			border-radius: 100px;
			width: 100%;
			height: 1500px;
			color: #fff;
			border-radius: 5px;
			padding: 10px 25px;
			font-family: "Lato", sans-serif;
			font-weight: 500;
			background: transparent;
			cursor: pointer;
			transition: all 0.3s ease;
			position: relative;
			display: inline-block;
			box-shadow: inset 2px 2px 2px 0px rgba(255, 255, 255, 0.5),
				7px 7px 20px 0px rgba(0, 0, 0, 0.1), 4px 4px 5px 0px rgba(0, 0, 0, 0.1);
		}

		input[type=button] {
			background: pink;
			background: linear-gradient(0deg,
					pink 0%,
					pink 100%);
			border: none;
		}

		input[type=button] :hover {
			background: pink;
			background: linear-gradient(0deg,
					pink 0%,
					pink 100%);
		}
	</style>
	<script type="text/javascript">
  <!--	
  </script>
  </head>
  <p1>当前菜单："1.黄焖鸡","2.汉堡","3.麻辣拌","4.过桥米线","5.豆花鱼","6.煎饼果子",
	"7.兰州拉面","8.汤泡饭","9.闷锅","10.牛肉饭","11.冒菜宽粉",
	"12.烤肉拌饭","13.沾串"," 14.烤串","15.酥油饼","16.肉末茄子",
	"17.武汉炒米","18.熏肉大饼","19.掉渣饼","20.西米家" ,"21.山西刀削面"
	,"22.盖浇饭","23.火锅面皮","24.葱油拌面" </p1>
  <body>
  <h1>24.今天吃什么</h1>
  <p>
  &nbsp
  </p>
  <input type="button" value="Button" name="btn">  
  <script type="text/javascript">
    var students=["1.黄焖鸡","2.汉堡","3.麻辣拌","4.过桥米线","5.豆花鱼","6.煎饼果子",
                     "7.兰州拉面","8.汤泡饭","9.闷锅","10.牛肉饭","11.冒菜宽粉",
					 "12.烤肉拌饭","13.沾串"," 14.烤串","15.酥油饼","16.肉末茄子",
					 "17.武汉炒米","18.熏肉大饼","19.掉渣饼","20.西米家" ,"21.山西刀削面"
					 ,"22.盖浇饭","23.火锅面皮","24.葱油拌面"   
        ];
	//p是指向p对象的指针，button是指向按钮对象的指针
	 var p=document.querySelector("p");
	 var button=document.querySelector("input");
	 var j=0;
	 //输出学生姓名的函数
	 function  myFunction() { 
		p.textContent=students[j];
		j++;
		//遍历完全班同学，又从头开始重新遍历
		if(j==students.length){
			j=0;
		}
	 }
	 
	//间隔10ms输出姓名，开始闪现
	var time=setInterval(myFunction,10);
	var count=0;
	button.onclick=click;
	function click(){
	//点击按钮控制点名和重新开始点名,异步函数
	 if(button.onclick){
		count++;
	 }
	 //偶数次开始遍历学生
	 if(count%2==0){
		 time=setInterval(myFunction,10);
	 }
	 //奇数次闪现停止
	 if(count%2!=0){
		clearInterval(time);
	 }
	}
  </script>
 </body>
</html>